<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>钓友圈帖子详情</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="帖子ID">{{ postDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="标题">{{ postDetail.title }}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ postDetail.authorName }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="statusOptions" :value="postDetail.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="点赞数">{{ postDetail.likeCount }}</el-descriptions-item>
        <el-descriptions-item label="评论数">{{ postDetail.commentCount }}</el-descriptions-item>
        <el-descriptions-item label="阅读数">{{ postDetail.readCount }}</el-descriptions-item>
        <el-descriptions-item label="是否置顶">{{ postDetail.isTop === 1 ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="标签">{{ postDetail.tags }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{ postDetail.location }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ parseTime(postDetail.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="内容" :span="2">
          <div style="max-height: 300px; overflow-y: auto; white-space: pre-wrap; padding: 10px; background-color: #f5f5f5; border-radius: 4px;">
            {{ postDetail.content }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
      
      <!-- 评论列表 -->
      <div style="margin-top: 30px;">
        <h3>评论列表 ({{ commentList.length }})</h3>
        <el-table :data="commentList" style="width: 100%" v-loading="commentLoading">
          <el-table-column prop="content" label="评论内容" :show-overflow-tooltip="true" min-width="300" />
          <el-table-column prop="authorName" label="评论者" width="120" />
          <el-table-column prop="likeCount" label="点赞数" width="80" align="center" />
          <el-table-column prop="createTime" label="评论时间" width="180" align="center">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="scope">
              <el-button link type="danger" @click="handleDeleteComment(scope.row)" v-hasPermi="['fishing:community:remove']">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div v-if="commentList.length === 0" style="text-align: center; padding: 20px; color: #999;">
          暂无评论
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="CommunityPostDetail">
import { getCommunityPost, getPostComments, deleteComment } from "@/api/fishing/community";

const { proxy } = getCurrentInstance();
const { parseTime } = proxy;
const route = useRoute();
const router = useRouter();

const postDetail = ref({});
const commentList = ref([]);
const commentLoading = ref(false);

// 状态字典
const statusOptions = ref([
  { label: "草稿", value: "0" },
  { label: "已发布", value: "1" },
  { label: "已删除", value: "2" }
]);

/** 获取帖子详情 */
function getPostDetail() {
  const postId = route.params.id;
  getCommunityPost(postId).then(response => {
    postDetail.value = response.data;
    getCommentList(postId);
  });
}

/** 获取评论列表 */
function getCommentList(postId) {
  commentLoading.value = true;
  getPostComments(postId).then(response => {
    commentList.value = response.data || [];
    commentLoading.value = false;
  }).catch(() => {
    commentLoading.value = false;
  });
}

/** 删除评论 */
function handleDeleteComment(row) {
  proxy.$modal.confirm('是否确认删除该评论？').then(function() {
    return deleteComment(row.id);
  }).then(() => {
    getCommentList(postDetail.value.id);
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 返回 */
function goBack() {
  router.go(-1);
}

onMounted(() => {
  getPostDetail();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>